<template>
  <div class="search_view">
    <!-- 顶部搜索 -->
    <div class="topBar">
      <div class="above">
        <div class="back" @click="back">
          <span class="iconfont icon-youjiantou1"></span>
        </div>

        <div class="input">
          <span class="fdj iconfont icon-Magnifier"></span>
          <input type="text" v-model="searchVal" />
        </div>
        <div class="searchBtn" @click="getSearchResultFun(searchVal)">
          <span> 搜索 </span>
        </div>
      </div>
    </div>
    <div class="filter">
      <van-dropdown-menu>
        <van-dropdown-item v-model="sortVal" :options="sort" title="综合排序" />
        <van-dropdown-item
          v-model="channelVal"
          :options="channel"
          title="全部频道"
        />
        <van-dropdown-item title="筛选" ref="item">
          <div class="state">
            <div class="above">
              <span class="title">书籍价格</span>
            </div>
            <div class="content">
              <ul>
                <li
                  @click="priceVal = item.title"
                  v-for="(item, index) in price"
                  :key="index"
                  :class="{ active: item.title == priceVal }"
                >
                  {{ item.title }}
                </li>
              </ul>
            </div>
          </div>
          <div class="state">
            <div class="above">
              <span class="title">书籍字数</span>
            </div>
            <div class="content">
              <ul>
                <li
                  @click="fontkCount = item.title"
                  v-for="(item, index) in count"
                  :key="index"
                  :class="{ active: item.title == fontkCount }"
                >
                  {{ item.title }}
                </li>
              </ul>
            </div>
          </div>
          <div class="state">
            <div class="above">
              <span class="title">完结状态</span>
            </div>
            <div class="content">
              <ul>
                <li
                  @click="endVal = item.title"
                  v-for="(item, index) in end"
                  :key="index"
                  :class="{ active: item.title == endVal }"
                >
                  {{ item.title }}
                </li>
              </ul>
            </div>
          </div>
          <div style="padding: 5px 16px">
            <van-button type="danger" block round> 确认 </van-button>
          </div>
        </van-dropdown-item>
      </van-dropdown-menu>
    </div>

    <div class="bs_title"><span>书城 </span></div>

    <div class="book_result">
      <div class="loading" v-if="!showLoading">
        <van-loading
          size="30px"
          text-size="30px"
          text-color="#adadad"
        />Loding....
      </div>
      <p class="no_result" v-if="!ResultData">暂无搜索结果</p>
      <ul v-if="ResultData">
        <router-link
          tag="li"
          :to="{
            name: 'comment',
            query: { id: result.id, title: result.text },
          }"
          v-for="result in ResultData"
          :key="result.id"
        >
          <div class="left">
            <div class="img">
              <img :src="result.cover" alt="" />
            </div>
          </div>
          <div class="right">
            <div class="top">
              <p class="book">
                <i class="name">{{ result.text }}</i>
              </p>
              <p class="type">
                <span>{{ result.author }}</span>
                <!-- <i>{{ result.category }}</i> -->
              </p>
            </div>
            <p class="description">
              {{ result.d }}
            </p>
          </div>
        </router-link>
      </ul>
    </div>
  </div>
</template>

<script>
import { getSearchResult } from "../../api/search";

export default {
  created() {
    let search = this.$route.query.search;
    this.searchVal = search;
    this.getSearchResultFun(search);
  },
  methods: {
    getSearchResultFun(val) {
      if (!val) return;
      // this.ResultData = null;
      this.showLoading = false;
      getSearchResult({ search: val }).then(({ data: res }) => {
        this.ResultData = res.words.w;
        this.showLoading = true;
      }).catch((err) => {
          if (err) {
            this.$toast({
              message: "服务器崩溃",
              position: "middle",
            });
          }
        });
    },
    back() {
      this.$router.go(-1);
    },
  },
  data() {
    return {
      showLoading: false,
      // 搜索值
      searchVal: "",
      // 搜素的数组
      ResultData: [],
      //分类
      sortVal: 0,
      //   频道
      channelVal: 0,
      //完结状态
      endVal: "全部",
      //书籍价格
      priceVal: "全部",
      //书籍字数
      fontkCount: "全部",

      sort: [
        { text: "销量最高", value: 0 },
        { text: "人起最旺", value: 1 },
        { text: "最新上架", value: 2 },
        { text: "最近更新", value: 3 },
      ],
      channel: [
        { text: "男生", value: 0 },
        { text: "女生", value: 1 },
        { text: "出版", value: 3 },
      ],
      end: [
        { title: "全部", value: 0 },
        { title: "完结", value: 1 },
        { title: "连载", value: 2 },
      ],
      price: [
        { title: "全部", value: 0 },
        { title: "免费", value: 1 },
        { title: "包月", value: 2 },
        { title: "收费", value: 3 },
      ],
      count: [
        { title: "全部", value: 0 },
        { title: "30万字以下", value: 1 },
        { title: "30万-50万字", value: 2 },
        { title: "50-100万字", value: 3 },
        { title: "100万字以上", value: 4 },
      ],
    };
  },
};
</script>

<style lang="less" scoped>
.search_view {
  .loading {
    width: 125px;
    height: 125px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    // background: #fff;
    color: #fff;
    z-index: 500;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 20px;
  }
  .topBar {
    background-color: #fff;
    z-index: 960;
    .above {
      padding: 6px 3px;
      display: flex;
      align-items: center;
      .back {
        flex: 0 0 25px;
        text-align: center;
        line-height: 25px;
        .iconfont {
          width: 17px;
          height: 17px;
        }
      }
      .input {
        position: relative;
        flex: 1;
        .fdj {
          position: absolute;
          top: 4px;
          left: 10px;
        }
        input[type="text"] {
          height: 25px;
          width: 287px;
          border-radius: 12px;
          background-color: #f8f8f8;
          border: 0;
          padding-left: 30px;
          box-sizing: border-box;
        }
      }
      .searchBtn {
        span {
          color: #4c4c4c;
          font-size: 17px;
        }
      }
    }
    .module {
      display: flex;
      padding: 8px 0px;
      justify-content: space-around;
      .icon_block {
        text-align: center;
        width: 95px;

        span {
          font-size: 14px;
        }
        border-right: 2px solid #eeeeee;
        &:last-of-type {
          border-right: transparent;
        }
      }
    }
  }
  /deep/.van-dropdown-menu {
    .van-dropdown-menu__bar {
      box-shadow: none;
    }
    .van-popup {
      background: #f5f5f5;
    }
  }
  .filter {
    .state {
      width: 350px;
      margin: 10px auto 16px auto;
      .above {
        // font-weight: 500;
        display: flex;
        color: #adadad;
        font-size: 15px;
        justify-content: space-between;
      }
      .content {
        ul {
          display: flex;
          flex-wrap: wrap;
          li {
            // width: 50px;
            padding: 10px;
            height: 30px;
            line-height: 10px;
            background: #fff;
            text-align: center;
            color: #adadad;
            border-radius: 5px;
            font-size: 14px;
            margin-right: 20px;
            margin-top: 10px;
            &.active {
              background-color: #ed6460;
              color: #fff;
            }
          }
        }
      }
    }
  }
  .bs_title {
    padding: 0 13px;
    height: 35px;
    line-height: 35px;
    font-size: 15px;
    color: #8e8e8e;
    background: #f5f5f5;
  }

  .book_result {
    padding: 10px 13px;
    .no_result {
      width: 100%;
      text-align: center;
      margin: 0 auto;
      color: #a2a2a2;
      font-size: 14px;
      margin-top: 20px;
    }
    ul {
      li {
        display: flex;
        padding-bottom: 15px;

        .left {
          .img {
            width: 80px;
            height: 110px;
            box-shadow: 3px 2px 8px -3px #706e6b;
            img {
              width: 80px;
              height: 105px;
            }
          }
        }
        .right {
          flex: 1;
          margin-left: 13px;
          line-height: 20px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .top {
            .book {
              display: flex;
              i {
                font-style: normal;
                font-size: 15px;
                font-weight: 600;
                color: #383838;
              }
            }
            .type {
              position: relative;
              color: #a2a2a2;
              font-size: 12px;
              i {
                margin-left: 10px;
              }
            }
          }
          .description {
            font-size: 12px;
            color: #7a7a7a;
            text-overflow: -o-ellipsis-lastline;
            overflow: hidden; //溢出内容隐藏
            text-overflow: ellipsis; //文本溢出部分用省略号表示
            display: -webkit-box; //特别显示模式
            -webkit-line-clamp: 2; //行数
            line-clamp: 2;
            -webkit-box-orient: vertical; //盒子中内容竖直排列
            width: 100%;
          }

          &::after {
            position: absolute;
            top: 50%;
            left: 52px;
            transform: translateY(-50%);
            width: 1px;
            height: 10px;
            content: "";
            background-color: #ececec;
          }
        }
      }
    }
  }
}
</style>